<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>
        // call
        // function fn(){
        //     console.log(this)  // 指向 window
        // }
        // fn()
        // function fn1(){
        //     console.log(this)   // 指向 window 里面的 body
        // }
        // fn1.call(document.body)

        // var a = 10
        // function fn(b,c,d){
        //     console.log(this)  // 指向 a
        //     console.log(b,c,d)  // call 可以传参
        // }
        // fn.call(a,10,20,30)

        // // apply
        // function fn(){
        //     console.log(this)  // 指向 window
        // }
        // fn()
        // function fn1(){
        //     console.log(this)   // 指向 body
        // }
        // fn1.apply(document.body)
        // var a = 10
        // function fn2(b,c,d){
        //     console.log(this)   // 指向 a
        //     console.log(b,c,d)
        // }
        // fn2.apply(a,[10,20,30])    // 传递参数用数组包裹起来

        // bind
            function fn(f,g){
                console.log(this)
                console.log(f)
                console.log(g)
            }
            fn(10)
            var a = 10
            var v = fn.bind(document.body,10,20)
            console.log(v)
            v()
            var b = v.bind(a)
            // 这里要注意因为 bind 改变 this指向 是创建一个新的函数,所以要有一个接受,不然无法直接用
            // 改变后的变量也是不能用 bind 的
            b()

    </script>
    
</body>
</html>